<template>
	<base-page bgColor="#F4F4F4">
		<cu-custom bgColor="bg-white" slot="header" :isBack="true">
			<block slot="content"><view class="text-center text-black ">物流信息</view></block>
		</cu-custom>

		<view slot="center">
			<view class="item-content" v-if="getpackagelist.goods_list">
				<view class="item-info">
					<view class="info-img"><image :src="getpackagelist.goods_list[0].sku_image" mode="aspectFit"></image></view>
					<view class="info-text">
						<view class="info-text-name">物流公司：{{ getpackagelist.express_company_name }}</view>

						<view class="num-copy" v-if="getpackagelist.trace.logistic_code">
							<view class="info-text-num">运单号：{{ getpackagelist.trace.logistic_code }}</view>
							<view class="copy-icon" @click="copyCall(getpackagelist.trace.logistic_code)"><image :src="staticImgUrl + 'copylogo.png'" mode=""></image></view>
						</view>
					</view>
				</view>
				<view class="logistics-box">
					<block v-if="getpackagelist.trace.success">
						<view class="logisticsMsg" v-for="(item, index) in getpackagelist.trace.list" :key="index">
							<view class="ballandborder">
								<view class="ball"></view>
								<view class="border-l"></view>
							</view>
							<view style="padding-bottom: 20rpx;">
								<view class="logisticsText">{{ item.remark }}</view>
								<view class="logisticsTime">{{ item.datetime }}</view>
							</view>
						</view>
					</block>
					<block v-if="!getpackagelist.trace.success">
						<view>{{ getpackagelist.trace.reason }}</view>
					</block>
				</view>
				<view style="height: 30rpx;"></view>
			</view>
		</view>
	</base-page>
</template>

<script>
import $Axios from '@/common/js/request/http.js';
export default {
	name: 'Logistics',
	data() {
		return {
			getpackagelist: {}
		};
	},
	onLoad(e) {
		let options = this.$Router.queryObj().order_id;
		this.getpackage(options);
	},
	onShow(e) {},
	methods: {
		getpackage(order_id) {
			$Axios
				.post(`api/order/package`, {
					order_id: order_id
				})
				.then(res => {
					this.getpackagelist = res[0];
				});
		},
		// 复制
		copyCall(text) {
			this.$Utils.copyText(text).then(res => {
				// console.log('log', res);
				uni.showToast({
					title: res.data,
					duration: 2000
				});
			});
		}
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
image {
	width: 100%;
	height: 100%;
}

.item-content {
	width: 100%;

	.item-info {
		width: 702rpx;
		height: auto;
		background: #ffffff;
		border-radius: 16rpx;
		margin: 30rpx auto 30rpx auto;
		display: flex;
		padding: 30rpx;

		.info-img {
			width: 140rpx;
			height: 140rpx;
			background: #f4f4f4;
			border-radius: 16rpx;
			margin-right: 30rpx;

			.info-text {
				.info-text-name {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.info-text-num {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}
	}

	.logistics-box {
		width: 702rpx;
		height: auto;
		background: #ffffff;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 30rpx;

		.logisticsMsg:first-child {
			.logisticsText {
				color: #fd3b5c;
			}
			.logisticsTime {
				color: #fd3b5c;
			}
			.border-l {
				display: none;
			}
		}
	}
}

.num-copy {
	display: flex;
	align-items: center;

	.copy-icon {
		width: 22rpx;
		height: 22rpx;
		margin-left: 8rpx;
	}
}

.logisticsMsg {
	display: flex;

	.ballandborder {
		padding-right: 21rpx;

		.ball {
			width: 22rpx;
			height: 22rpx;
			background: #cccccc;
			border-radius: 50%;
		}

		.border-l {
			width: 1rpx;
			height: 100%;
			border: 1rpx dashed #cccccc;
			margin: 0 auto;
		}
	}

	.logisticsText {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.logisticsTime {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-top: 23rpx;
		color: #999999;
	}
}
</style>
